<%--
  Created by IntelliJ IDEA.
  User: Chf
  Date: 2021/4/6
  Time: 11:14
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<link rel="shortcut icon" href="favicon.ico">
<link href="static/plugins/Hplus-v.4.1.0/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
<link href="static/plugins/Hplus-v.4.1.0/css/font-awesome.css?v=4.4.0" rel="stylesheet">
<link href="static/plugins/Hplus-v.4.1.0/css/plugins/iCheck/custom.css" rel="stylesheet">
<link href="static/plugins/Hplus-v.4.1.0/css/animate.css" rel="stylesheet">
<link href="static/plugins/Hplus-v.4.1.0/css/style.css?v=4.1.0" rel="stylesheet">
<link href="static/pagination/pagination.css" rel="stylesheet">
<!-- 全局js -->
<script src="static/plugins/Hplus-v.4.1.0/js/jquery.min.js?v=2.1.4"></script>
<script src="static/plugins/Hplus-v.4.1.0/js/bootstrap.min.js?v=3.3.6"></script>
<%--  引入假分页插件：http://pagination.js.org/ --%>
<script src="static/pagination/pagination.js"></script>
<html>
<head>
    <title>Ajax</title>
    <style>
        th{
            text-align: center;
        }
    </style>
</head>
<body>
<form id="userInfo" class="form-horizontal" style="margin: 20px auto">
    <div class="form-group">
        <label class="col-lg-2 col-md-2 control-label">用户名</label>
        <div class="col-lg-3 col-md-3">
            <input type="text" id="userName" name="username" class="form-control">
        </div>
    </div>
    <div class="form-group">
        <label class="col-lg-2 col-md-2 control-label">地址</label>
        <div class="col-lg-3 col-md-3">
            <input type="text" id="useraddress" name="useraddress" class="form-control">
        </div>
    </div>
    <div class="form-group">
        <label class="col-lg-2 col-md-2 control-label">联系方式</label>
        <div class="col-lg-3 col-md-3">
            <input type="text" id="usertel" name="usertel" class="form-control">
        </div>
    </div>
    <div class="form-group">
        <label class="col-lg-2 col-md-2 control-label">注册日期</label>
        <div class="col-lg-3 col-md-3">
            <input type="date" id="userregdate" name="userregdate" class="form-control">
        </div>
        <div class="col-lg-3 col-md-3">
            <input type="date" name="userregdate2" id="userregdate2" class="form-control">
        </div>
    </div>
    <div style="text-align: center">
        <button type="button" id="queryInfo" onclick="doQueryUserInfo()" style="margin:0 30px">查找信息</button>
        <button type="button" id="addInfo" onclick="doUpdateInfo()">添加信息</button>
    </div>
</form>
<div class="col-lg-12">
    <div class="ibox float-e-margins">
        <div class="ibox-title">
            <h5>边框</h5>
            <div class="ibox-tools">
                <a class="collapse-link">
                    <i class="fa fa-chevron-up"></i>
                </a>
                <a class="dropdown-toggle" data-toggle="dropdown" href="table_basic.html#">
                    <i class="fa fa-wrench"></i>
                </a>
                <ul class="dropdown-menu dropdown-user">
                </ul>
                <a class="close-link">
                    <i class="fa fa-times"></i>
                </a>
            </div>
        </div>
        <div class="ibox-content">
            <table class="table table-bordered" style="text-align: center">
                <thead>
                    <tr style="text-align: center">
                        <th>序号</th>
                        <th>头像</th>
                        <th>姓名</th>
                        <th>密码</th>
                        <th>地址</th>
                        <th>联系方式</th>
                        <th>注册日期</th>
                        <th>修改信息</th>
                        <th>删除信息</th>
                    </tr>
                </thead>
                <tbody id="showData">
<%--                利用jstl标签进行信息填充--%>
<%--                <c:forEach items="${sessionScope.userInfoList}" var="userInfo" varStatus="st">--%>
<%--                    <tr>--%>
<%--                        <td>${st.index+1}</td>--%>
<%--                        <td><img src="${userInfo.userimg}" style="width: 60px;height: 60px;border-radius: 50%"></td>--%>
<%--                        <td>${userInfo.username}</td>--%>
<%--                        <td>${userInfo.userpsw}</td>--%>
<%--                        <td>${userInfo.useraddress}</td>--%>
<%--                        <td>${userInfo.usertel}</td>--%>
<%--                        <td><fmt:formatDate value="${userInfo.userregdate}" type="date"--%>
<%--                                            pattern="yyyy-MM-dd HH:mm:ss"></fmt:formatDate></td>--%>
<%--                        <td><a href="" class="btn btn-primary btn-lg active" role="button">修改</a></td>--%>
<%--                        <td><a href="" class="btn btn-primary btn-lg active" onclick="return confirm('请确认是否删除该记录？')"--%>
<%--                               role="button">删除</a></td>--%>
<%--                    </tr>--%>
<%--                </c:forEach>--%>
                </tbody>
            </table>
        </div>
<%--        分页插件--%>
        <div id="pagerbar"></div>
    </div>
<%--    模态框  添加信息 修改信息--%>
    <div id="insertInfoModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
        <div class="modal-dialog" role="document" style="width: 1000px">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="gridSystemModalLabel">用户信息管理</h4>
                </div>
<%--                表单信息--%>
                <div class="modal-body">
<%--                    文件上传--%>
                    <form id="userInfo_Modal" enctype="multipart/form-data" class="form-horizontal">
                        <input type="hidden" name="userid" id="userid" value="">
                        <div class="form-group">
                            <label class="col-lg-2 col-md-2 control-label">用户名</label>
                            <div class="col-lg-2 col-md-2 col-sm-2">
                                <input type="text" id="userName_Modal" name="username" class="form-control">
                            </div>
                            <label class="col-lg-2 col-md-2 control-label">密码</label>
                            <div class="col-lg-2 col-md-2 col-sm-2">
                                <input type="password" id="userpsw_Modal" name="userpsw" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-2 col-md-2 col-sm-2 control-label">地址</label>
                            <div class="col-lg-2 col-md-2 col-sm-2">
                                <input type="text" id="useraddress_Modal" name="useraddress" class="form-control">
                            </div>
                            <label class="col-lg-2 col-md-2 col-sm-2 control-label">联系方式</label>
                            <div class="col-lg-2 col-md-2 col-sm-2">
                                <input type="text" id="usertel_Modal" name="usertel" class="form-control">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-lg-2 col-md-2 col-sm-2 control-label">注册日期</label>
                            <div class="col-lg-2 col-md-2 col-sm-2">
                                <input type="date" id="userregdate_Modal" name="userregdate" class="form-control">
                            </div>
                            <label class="col-lg-2 col-md-2 col-sm-2 control-label">头像</label>
                            <div class="col-lg-2 col-md-2 col-sm-2">
                                <input type="file" id="userimg_Modal" name="file_userimg" class="form-control">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" onclick="doAddInfo()">保存信息</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
</div>
<script>
    //查询用户信息
    function doQueryUserInfo() {
        //设置分页插件的跳转页数
        var num = $("#pagerbar .active").attr("data-num");
        $.ajax({
            type: "post",
            url: "AjaxUserInfoQuery",
            data: $("#userInfo").serialize(),
            datatype: "json",
            success: function (data) {
                // 将查询出来的结果集赋值给分页插件，让其进行分页处理
                // 调用分页插件，数据显示的页面渲染放到分页插件的回调函数中即可
                $('#pagerbar').pagination({
                    dataSource: data, // 分页插件绑定ajax查询的结果集
                    pageSize: 10, // 每页显示的记录条数
                    showGoInput: true, // 是否显示 go 的跳转输入框
                    showGoButton: true,  // 是否显示 go 的跳转按钮
                    pageNumber:num, //设置分页初始页面的下标
                    callback: function (pagedata, pagination) {  // 分页的回调函数，用于显示分页的每一页的数据
                        // 解析分页插件中显示的每一页的pagedata，进行数据显示
                        // 显示的数据内容
                        var strShowData = "";
                        // 开始进行遍历data  json对象
                        $.each(pagedata, function (i, eachRow) {
                            strShowData += "<tr>"
                            strShowData += "<th scope='row'>" + (i+1) + "</th>"
                            strShowData += "<td><img src='" + eachRow.userimg + "'style='width: 50px;height: 50px;border-radius: 50%'/></td>"
                            strShowData += "<td>" + eachRow.username + "</td>"
                            strShowData += "<td>" + eachRow.userpsw + "</td>"
                            strShowData += "<td>" + eachRow.useraddress + "</td>"
                            strShowData += "<td>" + eachRow.usertel + "</td>"
                            strShowData += "<td>" + eachRow.userregdate + "</td>"
                            strShowData += '<td><button class="btn btn-default" onclick="doUpdateInfo('+ eachRow.userid +')" role="button">修改</button></td>'
                            strShowData += '<td><button class="btn btn-default" onclick="doDelInfo('+ eachRow.userid +')" role="button">删除</button></td>'
                            strShowData += "</tr>"
                        });

                        // 将要显示的内容写到控件中
                        $("#showData").html(strShowData);

                    }
                })
            },
            error: function () {
                // ajax请求发生非错误时的回调函数
                alert("查询信息失败!")
            }

        });
    }
    //添加用户信息
    function doAddInfo(){
        //使用formdata来上传
        var formdata = new FormData($("#userInfo_Modal")[0]);  //转化为DOM对象
        $.ajax({
            type: "post",
            url: "AjaxUserInfoAdd",
            // data: $("#userInfo_Modal").serialize(),   //无法满足文件上传
            data: formdata,
            //不使用request进行处理请求
            contentType:false,
            processData:false,

            datatype: "json",
            success: function (data) {
                if(data && data == 'true'){
                    alert("更新成功！");
                    //隐藏模态框
                    $('#insertInfoModal').modal('hide');
                    //显示查询所有信息
                    doQueryUserInfo();
                }else {
                    alert("更新失败！")
                }
            },
            error: function () {
                // ajax请求发生非错误时的回调函数
                alert("更新信息时出错啦!!!")
            }
        });
    }
    //修改用户信息
    function doUpdateInfo(userid){
        // 显示模态框
        $('#insertInfoModal').modal('show');

        if(userid){
            $.getJSON("AjaxUserInfoQueryById?userid="+userid,function (data){
                if(data){
                    $("#userid").val(data.userid);
                    $("#userName_Modal").val(data.username);
                    $("#userpsw_Modal").val(data.userpsw);
                    $("#useraddress_Modal").val(data.useraddress);
                    $("#usertel_Modal").val(data.usertel);
                    $("#userregdate_Modal").val(data.userregdate);
                    $("#userimg_Modal").val(data.file_userimg);
                }
            });
        }else {
            $('#userInfo_Modal')[0].reset();
            $('#userid').val(null);
        }
    }
    //删除用户信息
    function doDelInfo(userid){
        if(confirm('请确认是否删除该记录？')){
            $.ajax({
                url:"AjaxUserInfoDel",
                type:"post",
                data:"userid="+userid,
                datatype:"text",
                success:function (data){
                    if(data=="true"){
                        doQueryUserInfo();
                        alert("删除成功！");
                    }else {
                        alert("删除失败！");
                    }
                },
                error:function (){
                    alert("删除信息时出错啦！");
                }
            })
        }
    }
</script>
</body>
</html>
